//折线图
var data =  [{
	name:'监测任务',
	dataLine:[3557, 4793]
},{
	name: '网站/网页类',
	dataLine: [4083,4136]
},{
	name: '其他',
	dataLine: [526, 657]
}]
var xData=['2018-01','2018-02','2018-03']
var legendData=function(data){
	var arr=[];
	for(var i=0;i<data.length;i++){
		arr.push(data[i].name)
	}
	return arr
}

var serOption=function(data){
	var lineSer=[];
	for(var i=0;i<data.length;i++){
		lineSer.push({
			name:data[i].name,
      type:'line',
      symbol: 'circle',
      smooth: true,
      data:data[i].dataLine
		})
	}
	return lineSer
}

//柱状图
var dataBar =  [{
	name:'境内',
	dataLine:[1196, 1190,1120]
},{
	name: '境外',
	dataLine: [2361,2946,1814]
}]
var xData=['2018-01','2018-02','2018-03']
var serOption=function(data){
	var barSer=[];
	for(var i=0;i<data.length;i++){
		barSer.push({
			name:data[i].name,
      type:'bar',
      symbol: 'circle',
      smooth: true,
      barWidth: '15%',
      data:data[i].dataLine
		})
	}
	return barSer
}

function getBarOption(adata,xData){
	var barOption = {
			color:["#ffe34e",  "#93dd6e", "#ff8700","#00a9e1","#0046af","#360293"],
	    tooltip: {
	    	formatter:'{a}:{c}',
	      /*trigger: 'axis',
	      axisPointer: {
	          type: 'cross',
	          crossStyle: {
	              color: '#999'
	          }
	      }*/
	   },
	    grid: {
				left: '3%',
				right: '4%',
				top	: 75,
				bottom: 0,
				containLabel: true
			},
	    toolbox: {
	    	show:false,
	        feature: {
	            dataView: {show: true, readOnly: false},
	            magicType: {show: true, type: ['line', 'bar']},
	            restore: {show: true},
	            saveAsImage: {show: true}
	        }
	    },
	    legend: {
	    	show:true,
	    	top:43,
	    	textStyle:{
	    		color:'#fff'
	    	},
//	       data: legendData(data)
	    },
	    xAxis: [
	        {
	          type: 'category',
	          boundaryGap: true,
	          data: xData,
	          axisPointer: {
	              type: 'shadow'
	          },
	          axisLabel:{
	          	color:'#c0d4da'
	          },
		        axisLine:{
		        	show:true,
		        	lineStyle:{
		        		color:'#c0d4da'
		        	}
		        }
	        }
	    ],
	    yAxis: [
	        {
	          type: 'value',
//	          name: '单位',
	          axisLabel: {
	            color:'#c0d4da'
	          },
	          axisLine:{
		        	show:true,
		        	lineStyle:{
		        		color:'#c0d4da'
		        	}
	        	},
	        	splitLine:{
	        		lineStyle:{
		        		color:'#272858'
		        	}
	        	}
	        }
	    ],
	    series:serOption(dataBar)
	};
	return barOption;
}
var barChart = echarts.init(document.getElementById('ecBar'))
barChart.setOption(getBarOption(dataBar,xData));

//饼图
var data1st=[
	{value:370, name:'加速'},
	{value:3206, name:'非加速'}
]
function dataLegend(data){
	var dataLe=[];
	for(var i=0;i<data.length;i++){
		dataLe.push(data[i].name)
	}
	return dataLe
}
var pieOpt = function(data){
  return {
  	color : ["#ffe34e",  "#93dd6e", "#ff8700","#09a7e2","#b8ff2e","#09e24b","#09e2cb","#fce24f","#f46a17","#d40d03"],
	  tooltip : {
	      trigger: 'item',
	      formatter: "{a} <br/>{b} : {c} ({d}%)"
	  },
	  legend: {
          show:true,
//	      orient: 'vertical',
	      left: 'left',
	      bottom: 'bottom',
	      textStyle :{
	      	color: '#fff'
	      },
	      data:dataLegend(data)
	  },
	  series : [
      {
        name: '',
        type: 'pie',
        radius : ['35%','50%'],
        center: ['50%', '45%'],
        data:data,
        itemStyle: {
          emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
	  ]
  }
};

var dataLeft1st=[
	{value:11829, name:'网站/网页类'},
	{value:1840, name:'其他'}
]

var pieLeft1Chart = echarts.init(document.getElementById('ecLeft1Pie'));
pieLeft1Chart.setOption(pieOpt(dataLeft1st))

var pieChart = echarts.init(document.getElementById('ecPie'));
pieChart.setOption(pieOpt(data1st))


//柱状堆积图
var xData=['2018-01','2018-02','2018-03'];
var barData=[
	{name:'北京',data:[307,183,148]},
	{name:'广东',data:[200,135,47]},
	{name:'浙江',data:[125,95,43]},
	{name:'广西',data:['-',133,159]},
	{name:'山东',data:[109,'-','-']},
]

var barOpt=function(xData,barData){
		var series=[];
		var legData=[];
		for(var i=0;i<barData.length;i++){
			series.push({
				name: barData[i].name,
	      type: 'bar',
	      stack: '总量',
	      barWidth: '30%',
	      data: barData[i].data
			})
		}
		for(var i=0;i<barData.length;i++){
			legData.push(barData[i].name)
		}
	var barOpt= {
		color : ["#0ba5e1", "#00e7d8","#c9ff63","#fce24f"],
		tooltip: {
			trigger: 'axis',
			confine: true,
			axisPointer: { // 坐标轴指示器，坐标轴触发有效
				type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
			},	
		},
		legend: {
			textStyle:{
				color: '#fff'
			},
			top:43,
			data: legData
		},
		grid: {
			left: '3%',
			right: '4%',
			top	: 75,
			bottom: 0,
			containLabel: true
		},
		xAxis: {
			type: 'category',
			splitLine:{    //grid区域分隔线
            show:true,
            lineStyle: {
                width:1,
                type:"dashed",
                color:"#48484a"
            }
        },
        axisLabel: {  //坐标轴标签
            show: true,
            textStyle: {
                color: '#0d7790'
            }
        },
        axisTick: {
            show: true,   //刻度线
            color:'#c0d4da'
        },
        axisLine:{
            show: true,   //坐标轴轴线
            lineStyle: {
                width:1,
                color:"#c0d4da"
            }
        },
			data: xData
		},
		yAxis: [{
			type: 'value',
			 splitLine:{    //grid区域分隔线
            show:true,
            lineStyle: {
                width:1,
                type:"dashed",
                color:"#1a1a1b"
            }
        },
        axisTick: {
        	color:'#c0d4da',
            show: true   //刻度线
        },
        axisLine: {
            show: true ,  //坐标轴轴线
            lineStyle: {
                width:1,
                color:"#c0d4da"
            }
        },
        axisLabel: {  //坐标轴标签
            show: true,
//          formatter: function(data) {
//          	if(unit == null) {
//          		unit = ''
//          	}
//          	return  data + unit;
//	          }
        }
		}],
		series: series
	}
	return barOpt
}

var barRChart = echarts.init(document.getElementById('ecBarR'));
barRChart.setOption(barOpt(xData,barData))

window.addEventListener("resize", function () {
		barChart.resize()
    pieChart.resize()
    pieLeft1Chart.resize()
    barRChart.resize()
}); 






